<template>
    <div class="container-box">
        <div class="content" ref="dataScreenRef">
            <div class="header">
                <div class="time">
                    <!-- <div class="set" @click="showSetting()">预警设置</div> -->
                    <div class="week">
                        <div class="week-top">{{ time.week }}</div>
                        <div class="week-bottom">{{ time.hours }}:{{ time.minutes }}:{{ time.seconds }}</div>
                    </div>
                    <div class="line"></div>
                    <div class="date">
                        <div class="year">{{ time.year }}年</div>
                        <div class="monthday">{{ time.date }}</div>
                    </div>
                </div>
            </div>
            <div class="container">
                <div class="text-loop">
                    <img src="@/assets/images/weather/喇叭.png" alt="" srcset="">
                    <marquee :behavior="scroll">{{ loopText }}</marquee>
                </div>
                <div class="main">
                    <div class="left">
                        <div class="left-top">
                            <SixBox ref="sixBoxRef"/>
                        </div>
                        <div class="left-bottom">
                            <!-- <div class="left-bottom-left">
                                <SafeWarning 
                                    :showSettingDialog="showSettingDialog"
                                    @close="showSettingDialog = false"
                                    ref="safeWarningRef"
                                />
                            </div> -->
                            <div class="left-bottom-right">
                                <HourlyForecast ref="hourlyForecastRef"/>
                            </div>
                        </div>
                    </div>
                    <div class="right">
                        <div class="right-top">
                            <CountryStation7Days ref="countryStation7DaysRef"/>
                        </div>
                        <div class="right-bottom">
                            <HistoryData ref="historyDataRef"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</template>

<script setup>
import CountryStation7Days from './components/CountryStation7Days.vue'
import HistoryData from './components/HistoryData.vue'
import SixBox from './components/SixBox.vue'
import SafeWarning from './components/SafeWarning.vue'
import HourlyForecast from './components/HourlyForecast.vue'
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { getWarningInfo } from '@/api/index'
import { setToken } from '@/utils/auth'
const dataScreenRef = ref(null);
const showSettingDialog = ref(false);

const timerSecond = ref(null);
const timerHour = ref(null);


onMounted(async() => {
    if (dataScreenRef.value) {
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
        dataScreenRef.value.style.width = `1920px`;
        dataScreenRef.value.style.height = `1080px`;
    }
    window.addEventListener("resize", resize);
    getData()
    timerSecond.value = setInterval(() => {
        time.value = getDateTime();
        if(time.value.minutes == '00' && time.value.seconds == '00') {
            setToken()
        }
    },1000)
    timerHour.value = setInterval(() => {
        sixBoxRef.value.getData()
        // safeWarningRef.value.getData()
        historyDataRef.value.getData()
        hourlyForecastRef.value.getData()
        countryStation7DaysRef.value.getData()
        getData()
    }, 1000 * 60 * 60)
});

// 设置响应式
const resize = () => {
    if (dataScreenRef.value) {
        dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;
    }
};

// 根据浏览器大小推断缩放比例
const getScale = (width = 1920, height = 1080) => {
    let ww = window.innerWidth / width;
    let wh = window.innerHeight / height;
    return ww < wh ? ww : wh;
};

onBeforeUnmount(() => {
    window.removeEventListener("resize", resize);
    clearInterval(timerSecond.value);
    clearInterval(timerHour.value);
});
const year = ref(new Date().getFullYear())
const month = ref(new Date().getMonth() + 1)
const day = ref(new Date().getDate())
const hour = ref('')
const minute = ref('')
const second = ref('')
const time = ref('')
const loopText = ref('')
const sixBoxRef = ref()
// const safeWarningRef = ref()
const historyDataRef = ref()
const countryStation7DaysRef = ref()
const hourlyForecastRef = ref()

function getDateTime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1; // 月份是从0开始的
    const day = now.getDate();
    const dayOfWeek = now.getDay(); // 星期几
    const hours = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    // 格式化月份、日期、小时、分钟、秒
    // @ts-ignore
    const pad = (num) => (num < 10 ? "0" + num : num);
    const monthStr = pad(month);
    const dayStr = pad(day);
    const hoursStr = pad(hours);
    const minutesStr = pad(minutes);
    const secondsStr = pad(seconds);

    // 星期的中文名称
    const weekdays = [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六",
    ];
    const weekday = weekdays[dayOfWeek];
    const dateTime = {
        year: year,
        date: `${monthStr}月${dayStr}日`,
        week: weekday,
        time: `${hoursStr}:${minutesStr}:${secondsStr}`,
        hours: hoursStr.toString(),
        minutes: minutesStr.toString(),
        seconds: secondsStr.toString(),
    };
    return dateTime;
}




function getData() {
    loopText.value = ''
    getWarningInfo().then((res) => {
        let data = res.data.obj
        let sjzData = data.filter(item => {
            return item.stationNum == '53698'
        })
        sjzData.forEach(item => {
            loopText.value += item.warnInfo
        })
    })
}

function showSetting() {
    showSettingDialog.value = true
}

</script>

<style lang="scss" scoped>
@import './index.scss'
</style>